<template>
    <div :class="`bigScreen ${screenStatus ? 'full' : ''}`">
        <div style="margin: 20px">
            <a-row :gutter="20">
                <a-col :span="6">
                    <a-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">设备数量</div>
                                <div class="card-value">
                                    {{ deviceStatistic.deviceCount }}
                                    <span class="card-unit">个</span>
                                </div>
                            </div>
                            <div class="card-right">
                                 <img src="../../../assets/images/device/card-show01.png" alt="" class="card-img" />
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                在线
                            </div>
                            <div class="card-label">
                                {{ deviceStatistic.deviceOnlineCount }}
                            </div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                离线
                            </div>
                            <div class="card-label">
                                {{ deviceStatistic.deviceOfflineCount }}
                            </div>
                        </div>
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">工单数量</div>
                                <div class="card-value">
                                    {{ deviceStatistic.devOpsTaskVoCount }}
                                    <span class="card-unit">个</span>
                                </div>
                            </div>
                            <div class="card-right">
                                 <img src="../../../assets/images/device/card-show02.png" alt="" class="card-img" />
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                已完成
                            </div>
                            <div class="card-label">{{ deviceStatistic.devOpsTaskVoNotProcessedCount }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                未完成
                            </div>
                            <div class="card-label">{{ deviceStatistic.devOpsTaskVoProcessedCount }}</div>
                        </div>
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">告警数量</div>
                                <div class="card-value">
                                    {{ deviceStatistic.alertCount }}
                                    <span class="card-unit">个</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <div ref="card-chart1" style="width: 130px; height: 70px"></div>
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                已处理
                            </div>
                            <div class="card-label">{{ deviceStatistic.alertProcessedCount }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                未处理
                            </div>
                            <div class="card-label">{{ deviceStatistic.alertNotProcessedCount }}</div>
                        </div>
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">组态数量</div>
                                <div class="card-value">
                                    {{ deviceStatistic.zutaiCount }}
                                    <span class="card-unit">个</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <div ref="card-chart2" style="width: 130px; height: 70px"></div>
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                今日
                            </div>
                            <div class="card-label">{{ deviceStatistic.zutaiZtCount }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                昨日
                            </div>
                            <div class="card-label">{{ deviceStatistic.zutaiJtCount }}</div>
                        </div>
                    </a-card>
                </a-col>
            </a-row>
        </div>
        <!-- <el-card class="line-chart" shadow="never">
            <div class="date-type">
                <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getlineData">
                    <el-radio-button label="1">日</el-radio-button>
                    <el-radio-button label="2">月</el-radio-button>
                    <el-radio-button label="3">年</el-radio-button>
                </el-radio-group>
            </div>
            <p style="margin-top: -2px; font-size: 18px; color: #000; box-sizing: border-box">工单分析</p>
            <div class="line-chart chart-outer" ref="lineChart" style="width: 100%; height: 270px"></div>
        </el-card> -->
        <a-card class="bar-chart" shadow="never">
            <div ref="barChart" class="chart-outer" style="width: 100%; height: 250px"></div>
        </a-card>
        <!-- <div style="width: 100%; text-align: center; font-size: 14px; color: #666; line-height: 32px; margin-top: 50px">
            <span>
                Copyright © 2024
                <a href="https://www.yanfankeji.com/" target="_blank">Yanfan</a>
                |
                <a href="https://www.yanfankeji.com/" target="_blank">延凡物联</a>
                | Apache License
            </span>
            <br />
            <span>
                项目文档
                <a href="https://www.yanfankeji.com:8090/" target="_blank">https://www.yanfankeji.com:8090/</a>
            </span>
        </div> -->
    </div>
</template>

<script>
// import { getOperationsituation } from '@/views/maintain/api/maintain/device';
// import { getDeviceStatistic } from '@/api/iot/device';

import * as echarts from 'echarts';
export default {
    name: 'bigScreen',
    data() {
        return {
            screenStatus: false,
            lineType: '1',
            barType: '1',
            lineResouce: {},
            barResouce: {},
            line_chart: null,
            bar_chart: null,
            card_chart1: null,
            card_chart2: null,
            deviceStatistic: {
                deviceCount: 1,
                deviceOnlineCount: 1,
                deviceOfflineCount: 1,
                devOpsTaskVoCount: 1,
                devOpsTaskVoNotProcessedCount: 1,
                devOpsTaskVoProcessedCount: 1,
                alertCount: 1,
                alertProcessedCount: 1,
                alertNotProcessedCount: 1,
                zutaiCount: 1,
                zutaiZtCount: 1,
                zutaiJtCount: 1,

            },
            colorList: ['#0147EB', '#14C9C9', '#F7BA1E', '#A3D12E', '#FA9134', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        };
    },
    created() {
        // this.getDeviceStatistic();
    },
    methods: {
        drawCardChart1() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart1 = echarts.init(this.$refs['card-chart1']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(1, 71, 235, 0.1)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(1, 71, 235, 0.1)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(1, 71, 235, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart1.setOption(option);
        },
        drawCardChart2() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart2 = echarts.init(this.$refs['card-chart2']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(0, 201, 159, 0.4)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(0, 201, 159, 0.4)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 201, 159, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart2.setOption(option);
        },
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            this.line_chart = echarts.init(this.$refs.lineChart);
            var option;
            let xAxis = [];

            if (this.lineType == 1) {
                xAxis = ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'];
            } else if (this.lineType == 2) {
                let lastDate = new Date(new Date().setDate(1));
                let lastTime = lastDate.getTime();
                let nextTime = new Date(lastDate.setMonth(lastDate.getMonth() + 1)).getTime();
                let num = (nextTime - lastTime) / 86400000;
                for (let i = 1; i < num; i++) {
                    xAxis.push(i + '日');
                    console.log('xAxis', xAxis);
                }
            } else {
                xAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            }
            // console.log('xAxis', xAxis);
            option = {
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                color: this.colorList,
                legend: {
                    right: 'left',
                    top: 0,
                    orient: 'horizontal',
                    itemGap: 10,
                    icon: 'circle',
                },
                grid: {
                    left: '3%',
                    right: '50',
                    bottom: '20',
                    top: '20%',
                    // containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    axisTick: {
                        show: false,
                    },
                    splitNumber: 2,
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: false, //隐藏或显示
                    },
                },
                series: [
                    {
                        name: '巡检',
                        type: 'line',
                        smooth: true,
                        data: this.lineResouce.inspection ? this.lineResouce.inspection : [],
                        // itemStyle: {
                        //     color: '#1890ff',
                        // },
                    },
                    {
                        name: '保养',
                        type: 'line',
                        smooth: true,
                        data: this.lineResouce.repair ? this.lineResouce.repair : [],
                        // itemStyle: {
                        //     color: '#13ce66',
                        // },
                    },
                    {
                        name: '维修',
                        type: 'line',
                        smooth: true,
                        data: this.lineResouce.upkeep ? this.lineResouce.upkeep : [],
                        // itemStyle: {
                        //     color: '#13ce66',
                        // },
                    },
                ],
            };
            this.line_chart.setOption(option);
        },
        drawBar() {
            this.bar_chart = echarts.init(this.$refs.barChart);
            var option;
            // 基于准备好的dom，初始化echarts实例
            let xAxis = [];

            if (this.barType == 1) {
                xAxis = ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'];
            } else if (this.barType == 2) {
                let lastDate = new Date(new Date().setDate(1));
                let lastTime = lastDate.getTime();
                let nextTime = new Date(lastDate.setMonth(lastDate.getMonth() + 1)).getTime();
                let num = (nextTime - lastTime) % 86400000;
                for (let i = 1; i < num; num++) {
                    xAxis.push(i + '日');
                }
            } else {
                xAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            }
            option = {
                animationDuration: 3000,
                color: this.colorList,
                title: {
                    text: '设备消息',
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    right: 'left',
                    top: 0,
                    orient: 'horizontal',
                    itemGap: 5,
                    icon: 'circle',
                },
                grid: {
                    left: '4%',
                    right: '50',
                    bottom: '20',
                    top: '20%',
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    axisTick: {
                        show: false,
                    },
                    splitNumber: 2,
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: false, //隐藏或显示
                    },
                },
                series: [
                    {
                        name: '正常',
                        type: 'bar',
                        data: [1200, 6000, 2000, 4000, 5000, 6000, 5000, 5000],
                        // itemStyle: {
                        //     color: '#1890ff',
                        // },
                    },
                    {
                        name: '禁用',
                        type: 'bar',
                        data: [5000, 6000, 5000, 5000, 6000, 5000, 6000, 1200],
                        // itemStyle: {
                        //     color: '#13ce66',
                        // },
                    },
                    {
                        name: '保养',
                        type: '维修',
                        data: [5000, 6000, 5000, 5000, 6000, 5000, 6000, 1200],
                        // itemStyle: {
                        //     color: '#13ce66',
                        // },
                    },
                ],
            };
            this.bar_chart.setOption(option);
        },
        // getlineData() {
        //     getOperationsituation({ dateType: this.lineType }).then((res) => {
        //         if (res.data) {
        //             for (let obj in res.data) {
        //                 let list = [];
        //                 for (let key in res.data[obj]) {
        //                     list.push(res.data[obj][key]);
        //                 }
        //                 this.lineResouce[obj] = list;
        //             }
        //         }
        //         console.log('this.lineResouce', this.lineResouce);
        //         this.drawLine();
        //     });
        // },
        getBarData() {
            this.drawBar();
        },
        /** 查询设备统计信息 */
        // getDeviceStatistic() {
        //     getDeviceStatistic().then((response) => {
        //         this.deviceStatistic = response.data;
        //         console.log(this.deviceStatistic);
        //     });
        // },
    },
    mounted() {
        // this.getlineData();
        this.getBarData();
        this.drawCardChart1();
        this.drawCardChart2();
    },
};
</script>
<style>
/* @import './index.css'; */

/* .el-card .chart-outer{
    width: 100% !important;
}
.el-card .chart-outer div:nth-child(1){
    width: 100% !important;
}
.el-card .chart-outer div:nth-child(1) canvas{
    width: 100% !important;
} */
.bigScreen .chart-card .card-show .card-left .card-title {
  font-size: 18px;
}
.bigScreen .chart-card .card-show .card-left .card-value {
  font-size: 32px;
  margin: 20px 0;
}
.bigScreen .chart-card .card-show .card-left .card-value .card-unit {
  color: #999;
  font-size: 16px;
}
.bigScreen .chart-card .card-content .card-label {
  font-size: 16px;
  line-height: 30px;
}
.bigScreen .chart-card .card-content .card-label .card-point {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.flex-between{
    display: flex;
    justify-content: space-between;
}
</style>


